
<template>
  <div>
    <div class="form_head">
      <div class="head_search">
        <el-input v-model="searchTxt"
                  placeholder="课程名称"></el-input>
        专业选择：
        <el-select v-model="cateOne">
          <el-option v-for="item in opt1"
                     :key="item.label"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
        <el-select v-model="cateTwo">
          <el-option v-for="item in opt2"
                     :key="item.label"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
        <el-select v-model="cateThree">
          <el-option v-for="item in opt3"
                     :key="item.label"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
        <el-button type="success"
                   @click="search()">查询</el-button>
      </div>
      <el-button type="primary"
                 @click="turnAdd">添加</el-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'Ljfvue2011Courseform',
  data () {
    return {
      searchTxt: "",
      cateOne: "",
      cateTwo: "",
      cateThree: "",
      opt1: [{
        value: "1",
        label: "前端"
      }, {
        value: "2",
        label: "后台"
      }, {
        value: "3",
        label: "视觉设计"
      }],
      opt2: [{
        value: "11",
        label: "JS"
      }, {
        value: "12",
        label: "Vue"
      }, {
        value: '13',
        label: "Webpack"
      },
      {
        value: "21",
        label: "Java"
      },
      {
        value: "22",
        label: "PHP"
      },
      {
        value: "22",
        label: "python"
      },
      {
        value: "31",
        label: "PS"
      },
      {
        value: "32",
        label: "蓝湖"
      },
      {
        value: "33",
        label: "Vi"
      }],
      opt3: [
        { value: "111", label: "js基础" },
        { value: "112", label: "js高级" }
      ]
    };
  },
  mounted () {

  },
  computed: {
    ...mapState("CourseStore", ["pageStart", "searchText", "CategoryOne", "CategoryTwo", "CategoryThree"])
  },
  methods: {
    ...mapMutations(["changeData"]),
    ...mapActions("CourseStore", ["getListApi"]),
    turnAdd () {
      this.$router.push("/courseadd")
      // 改变了面包屑导航
      this.changeData(["课程管理", "课程添加"])
      // 改变当前激活的默认导航
      this.$store.commit("changedefAct", "课程添加")
    },
    search () { //点击搜索
      // 触发mutations 改变state中的搜索条件
      this.$store.commit("CourseStore/changeSea", { sea: this.searchTxt, cateOne: this.cateOne, cateTwo: this.cateTwo, cateThree: this.cateThree })
      // 触发重新获取列表的actions 
      this.getListApi({
        pageStart: this.pageStart,
        searchText: this.searchText,
        CategoryOne: this.CategoryOne,
        CategoryTwo: this.CategoryTwo,
        CategoryThree: this.CategoryThree
      })
    }
  },
};
</script>

<style lang="less" >
.form_head {
  display: flex;
  height: 100px;
  line-height: 100px;
  color: white;
  background: black;
  justify-content: space-between;
  .head_search {
    display: flex;
    .el-input {
      width: 200px;
      margin-left: 10px;
    }
  }
  .el-button {
    height: 40px;
    margin-top: 28px;
    margin-left: 20px;
    margin-right: 20px;
  }
}
</style>